<template>
	<cover-view v-if="_show">
		<u-popup :show="_show" mode="center" @close="close" @open="open">
			<view class="mobile-box bg-white color-0F0400">
				<view class="hd fboxRow Ycenter font32">
					<image class="logo" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/logo_new.png" mode="aspectFill"></image> 本无名片
				</view>
				<view class="bd">
					<view class="item fboxRow Ycenter">
						<view class="tit">手机号</view>
						<view class="con">
							<u--input class="input font28" v-model.trim="fromData.mobile" placeholder="请输入手机号码" maxlength="11" clearable placeholderStyle="border:none;" placeholderClass="inputPlaceholder"></u--input>
						</view>
					</view>
					<view class="item fboxRow Ycenter">
						<view class="tit">验证码</view>
						<view class="con ">
							<u--input class="input font28" v-model.trim="fromData.code" placeholder="请输入验证码" placeholderStyle="border:none;" placeholderClass="inputPlaceholder">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button class="btn-code" @tap="getCode" :text="tips" size="mini"></u-button>
								</template>
							</u--input>
						</view>
					</view>
				</view>
				<view class="ft fboxRow Ycenter Xend font28">
					<view class="btn color-999796" @click="_show = false">取消</view>
					<view class="btn color-0F0400" @click="confimTap">确定</view>
				</view>
			</view>
		</u-popup>
	</cover-view>
</template>
<script>
	import {notifySms, oauthSms, getCurrentInfo} from '@/api/index.js';
	import {validPhone} from '@/static/js/validate.js';
	export default {
		props: {
			show: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				tips: '',
				fromData: {
					mobile: '',
					code: ''
				}
			}
		},
		computed:{
			_show:{
				get(){
					return this.show
				},
				set(val){
					this.$emit('update:show',val)
				}
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this._show = false
				// console.log('close');
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.fromData.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}
				if ( !validPhone(this.fromData.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({ title: '正在获取验证码' })
					notifySms({
						type: 'LOGIN',
						mobile: this.fromData.mobile
					}).then(res=>{
						console.log(res)
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			confimTap(){
				const { mobile, code } = this.fromData
				
				if (!mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}
				if ( !validPhone(mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				if (!code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}
				oauthSms({
					"code": code,
					"mobile": mobile
				}).then(res=>{
					try {
						uni.setStorageSync('bw_params', JSON.stringify(res.data));
					} catch (e) {
						// error
						console.log(e)
					}
					console.log('根据token获取用户信息和是否制作过拜年名片')
					getCurrentInfo().then(res=>{
						if(res.code == 0){
							try {
								uni.setStorageSync('bw_user_temp', JSON.stringify(res.data));
								this.close()
								this.$emit('callback', res.data)
							} catch (e) {
								// error
								console.log(e)
							}
						}						
					})
					
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.mobile-box {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -220rpx 0 0 -305rpx;
		width: 610rpx;
		height: 441rpx;
		border-radius: 12px;
	}

	.hd {
		padding: 0 30rpx;
		height: 100rpx;
		border-bottom: 1rpx solid #F0F0F5;
	}

	.hd .logo {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.bd {
		padding: 10rpx 48rpx 40rpx;
	}

	.item {
		margin-top: 30rpx;
	}

	.input {
		margin-left: 23rpx;
		width: 403rpx;
		height: 72rpx;
		font-size: 28rpx;
		background: #F7F8FF;
		border-radius: 4rpx;
		overflow: hidden;
		border: 0;
	}

	.btn-code {
		padding-left: 0;
		padding-right: 0;
		border: 0;
		background: none;
		font-size: 24rpx;
		color: #FB793F;
		min-width: 170rpx;
		text-align: right;
		}


	.ft {
		padding: 20rpx 25rpx 0;
	}

	.btn {
		padding: 0 25rpx;
		height: 60rpx;
	}
</style>
